<template>
  <div class="news-list">
    <nuxt-link v-for="item in newsList" :key="item.id" class="news-item" :to="'/news/' + item.id">
      <!-- 通过 jQuery.lazyload 实现图片的懒加载 -->
      <div><img class="lazy" alt="" :data-original="item.img_url" /></div>
      <div class="news-info">
        <div class="title">{{ item.title }}</div>
        <div class="time">
          <span>发表时间：{{ item.add_time | dateFormat }}</span>
          <span>点击：{{ item.click }}次</span>
        </div>
      </div>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  layout: 'cms',
  async asyncData({ params, $axios }) {
    let newsList = []
    const { data: res } = await $axios.get('/api/getnewslist')
    if (res.status === 0) {
      newsList = res.message
    }

    return {
      newsList
    }
  },
  mounted() {
    /* eslint-disable */
    $(function() {
      $('img.lazy').lazyload({ effect: 'fadeIn' })
    })
    /* eslint-disable */
  }
}
</script>

<style lang="less" scoped>
.news-list {
  .news-item {
    display: flex;
    padding: 10px 10px;
    border-top: 1px solid #eee;
    img {
      width: 60px;
      height: 60px;
    }
    .news-info {
      padding-left: 10px;
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: space-around;
      .title {
        font-size: 13px;
        font-weight: bold;
      }
      .time {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #26a2ff;
      }
    }
  }
}
</style>
